<template>
<uni-shadow-root class="partials-productList-pupuProductListSlide-index"><template name="pupuProductListSlide">
<block v-if="relateBean.length!=0">
  <scroll-view class="pupu_product_list_three" scroll-x="true">
    <view v-for="(result,index) in (relateBean)" :key="result.index" class="pupu_product_list_three_item" v-if="jsonData.count>0?index<jsonData.count:'true'" @click="tolinkUrl" :data-info="result">
       <view class="pupu_product_list_three_item_img">
         <image mode="aspectFill" class="pupu_product_list_three_item_url" :src="(result.imagePath)+'?x-oss-process=style/preview'"></image>
         <view class="product_jifen_block" v-if="result.needJifen">需消耗
           <text class="product_jifen_text" :style="'color: '+(defaultColor)+';'">{{result.needJifen}}积分</text>
         </view>
         <view class="sold_out_block" v-if="result.stock<=0">售罄</view>
         <view class="pupu_product_list_three_item_tag" v-if="result.tagArray[0]">{{result.tagArray[0]}}</view>
       </view>
       <text class="pupu_product_list_three_item_name">{{result.name}}</text>
        <view class="pupu_product_list_three_item_bottom">
          <view class="pupu_product_list_three_item_price" v-if="result.promotion&&result.promotion!=0">
            ￥<text class="pupu_product_list_three_item_true_price">{{result.promotionPrice}}</text>
            <view class="font_color" v-if="result.promotionPrice<result.tagPrice">/<text class="pupu_product_list_three_item_tagprice">￥{{result.tagPrice}}</text></view>
          </view>
          <view class="pupu_product_list_three_item_price" v-else>
            ￥<text class="pupu_product_list_three_item_true_price">{{result.price}}</text>
            <view class="font_color" v-if="result.price<result.tagPrice">/<text class="pupu_product_list_three_item_tagprice">￥{{result.tagPrice}}</text></view>
          </view>
          <view class="pupu_product_list_three_item_cart" :style="'background:'+(defaultColor)" @click.stop.prevent="readyAddCar" :data-product="result">
            <image class="pupu_product_list_three_item_cart_icon" src="https://image1.sansancloud.com/xianhua/2019_3/20/10/45/42_450.jpg?x-oss-process=style/preview_120"></image>
             <text class="pupu_product_list_three_item_cart_text">选购</text>
          </view>
        </view>
    </view>
  </scroll-view>
</block>
<block v-if="relateBean.length==0">
  <view class="noproduct">
    <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/17/11/9/46_337.jpg?x-oss-process=style/preview_120"></image>
    <text>没有相关商品</text>
  </view>
</block>
</template></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/productList/pupuProductListSlide/index'

Component({})

export default global['__wxComponents']['partials/productList/pupuProductListSlide/index']
</script>
<style platform="mp-weixin">
.pupu_product_list_three{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
  height:400rpx;
  white-space:nowrap;
  margin-top:10rpx;
  overflow: hidden;
  border:1rpx solid #f5f5f5;
  box-sizing: border-box;

}
.pupu_product_list_three_item{
  width:200rpx;
  height:400rpx;
  display:inline-block;
  text-align:center;
  position: relative;
  border-right:1rpx solid #f5f5f5;
  padding:20rpx;  
}
.pupu_product_list_three_item_img{
  display: flex;
  align-items: center;
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 10rpx;
  position: relative;
}
.pupu_product_list_three_item_url{
  width: 200rpx;
  height: 200rpx;
}
.pupu_product_list_three_item_name{
  font-size: 26rpx;
  font-weight: 500;
  margin-bottom: 10rpx;
  text-overflow: ellipsis;
  white-space:nowrap;
  overflow: hidden;
  width:100%;
  display:inline-block;
  text-align:center;
}
.pupu_product_list_three_item_unit{
  font-size: 24rpx;
  color: #a3a3a3;
  margin-bottom: 10rpx;
}
.pupu_product_list_three_item_bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%
}
.pupu_product_list_three_item_price{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  color: #ff826e;
  font-size: 24rpx;
}
.pupu_product_list_three_item_true_price{
  font-size: 36rpx;
  line-height:36rpx;
}
.pupu_product_list_three_item_price .font_color{
  color: #a3a3a3;
  font-size:22rpx;
  margin-left:6rpx;
  display: flex;
  align-items: center;
}
.pupu_product_list_three_item_tagprice{
  text-decoration:line-through;
}

.pupu_product_list_three_item_cart{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 24rpx;
  font-size: 20rpx;
  color: #fff;
  padding: 2rpx 6rpx;
  margin-top: 20rpx
}
.pupu_product_list_three_item_cart_icon{
  width: 30rpx;
  height: 30rpx;
  margin-right:10rpx;
}
.pupu_product_list_three_item_cart_text{
  letter-spacing: 12rpx;
  font-size:22rpx;
}
.pupu_product_list_three_item_tag {
    display:flex;
    flex-direction:row;
    align-items:center;
    position:absolute;
    /* top:8rpx;
    left:10rpx; */
    top:0rpx;
    left:0rpx;
    font-size:20rpx;
    background:#eb7aa4;
    padding:2rpx 6rpx;
    color:#fff;
}
/*没有相关商品  */
.noproduct{
  width: 100%;
  height: 200rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.noproduct image{
  width: 150rpx;
  height: 150rpx;
  margin: 0 auto;
}
.noproduct text{
  font-size: 30rpx;
}
</style>